<template>
	<view class="uni_circle_container flex-column" @click='circle_item_click'>
		<view class="text-container"> {{circle.content}} </view>
		<view class="fileJson" v-if="circle.imageUrl">
			<view v-for="(object,index) in circle.imageUrl.slice(0,3)" :key="index" class="item">
				<image :src="object.url" mode="aspectFill" class="image"
					@click.stop="previewImage(circle.imageUrl,index)">
				</image>
			</view>
		</view>
		<view class="bottom flex-row">
			<image :src="circle.userInfo.avatar|| '/static/defAvatar.png'" mode="aspectFit" class="imageUrl">
			</image>
			<view class="cUserName"> {{ circle.userInfo.nickname }} </view>
			<uni-dateformat :date="circle.createTime" format="yyyy-MM-dd" locale="zh"
				class="interval flex-1"></uni-dateformat>
			<view-like-more :like_count="circle.like_count" :view_count="circle.view_count"></view-like-more>
		</view>
	</view>
</template>

<script setup>
	/**
	 * @property {Object} circle 圈子数据
	 */
	const props = defineProps({
		circle: Object
	})

	function circle_item_click() {
		uni.navigateTo({
			url: '/pages/index/beikaoxindexiangqing/beikaoxindexiangqing?id=' + props.circle._id
		})
	}

	function previewImage(imageUrl, current) {
		let urls = imageUrl.map(item => item.url);
		uni.previewImage({
			urls,
			current
		})
	}
</script>

<style lang="scss" scoped>
	.uni_circle_container {
		background-color: white;
		padding: 24rpx 40rpx 32rpx;
		margin-top: 10rpx;

		.text-container {
			@include maxLines(2)
		}

		.fileJson {
			margin-top: 12rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10rpx;

			.item {
				height: 130rpx;

				.image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			align-items: center;

			.imageUrl {
				height: 30rpx;
				width: 30rpx;
				border-radius: 15rpx;
			}

			.cUserName {
				max-width: 160rpx;
				margin-left: 10rpx;
				font-size: 22rpx;
				color: $me-color-gray-6;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.interval {
				margin-left: 10rpx;
				font-size: 22rpx;
				color: $me-color-gray-6;
			}
		}
	}
</style>